<template>
	<transition name="el-fade-in">
		<div class="payByCardBox" >
			<div class="payBoxTop">
				<div class="payBoxTopTime">{{payBoxTime}}S</div>
				<div class="payBoxTopClose el-icon-close" @click="closeCardPay()">
				</div>
			</div>
			<div class="itemIitle hui ">支付金额：<span class="red">￥30.00</span></div>
			<div class="itemIitle red ">{{error}}</div>
			<input type="password" class="inputStyle" v-model="password" placeholder="请输入银行卡密码" />
			<div class="NumberBox">
				<el-button class="number" @click="clickNumber(item)" v-for="(item,index) in numberList" :key="'o'+index">
					{{item.name}}
				</el-button>	
			</div>
			<div class="makeSureBox">
				<div class="makeSure" @click="makeSurePayByBankCard()">确认</div>
			</div>
		</div>
		
<!-- 		<div class="mzjfPayBoxYhl" v-if="code=='mzjf'">
			<div class="mzjfPayBoxTop">
				<div class="mzjfPayBoxTopTime">{{payBoxTime}}S</div>
				<div class="mzjfPayBoxTopClose el-icon-close" @click="closeCardPay()">
				</div>
			</div>
			<div class="flex">
				<div class="width50">
					<div class="mzjfItemIitle huiHei ">医保支付金额：<span class="red">￥30.00</span></div>
					<div class="mzjfItemIitle hui bottmClass">(结算后直接从医保卡扣除)</div>
					<div class="mzjfItemIitle hui ">个人支付金额：<span class="red">￥30.00</span></div>
					<div class="mzjfItemIitle red error">{{error}}</div>
					<input type="password" class="mzjInputStyle" v-model="password" 
						placeholder="请输入银行卡密码" />
				</div>
				<div class="width50">
					<div class="mzjfNumberBox">
						<div class="mzjfnumber" @click="clickNumber(item)" v-for="(item,index) in numberList"
							:key="'o'+index">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="makeSureBox">
				<div class="makeSure" @click="makeSurePayByBankCard()">确认</div>
			</div>
		</div> -->
	</transition>
</template>

<script>
	export default {
		name: "Yhk",
		props: [
			'payByCardBoxIsSHow',
		    'code'
		],
		components: {
		},
		data() {
			return {
				//支付框倒计时
				payBoxTime: 60,
				numberList: [{
						name: 1,
						value: 1
					},
					{
						name: 2,
						value: 2
					}, {
						name: 3,
						value: 3
					}, {
						name: 4,
						value: 4
					}, {
						name: 5,
						value: 5
					}, {
						name: 6,
						value: 6
					}, {
						name: 7,
						value: 7
					}, {
						name: 8,
						value: 8
					}, {
						name: 9,
						value: 9
					}, {
						name: '退格',
						value: 10
					}, {
						name: 0,
						value: 0
					}, {
						name: '清除',
						value: 11
					}
				],
				//银行卡支付显示的错误信息
				error: '',
				password: ''
			}
		},
		methods: {
			closeCardPay() {
				this.$emit("hidYhk", 1)
			},
			//点击小键盘
			clickNumber(item) {
				if (item.value < 10) {
					this.password += (item.value).toString();
				}
				//退格
				else if (item.value == 10) {
					let str = this.password;
					this.password = str.slice(0, str.length - 1)
				} //清楚
				else if (item.value == 11) {
					this.password = "";
					this.error = "";
				}
			},
			//银行卡支付确认
			makeSurePayByBankCard() {
				//输入密码有误  this.password.length 
				if (this.password.length == 3) {
					this.error = "";
					this.$emit("hidYhk")
					this.$emit("payRes", 'fail');
				} else if (this.password.length < 4) {
					this.error = "您输入密码有误";
				} else {
					this.error = "";
					this.$emit("hidYhk")
					this.$emit("payRes", 'success');
				}
				this.password = "";
			},
		},
		created() {
			this.payBoxTime = 60;
			let _this = this;
			clearInterval(_this.myVar);
			_this.myVar = window.setInterval(() => {
				let dataTime = _this.payBoxTime;
				if (dataTime >= 1) {
					dataTime -= 1;
				}
				_this.payBoxTime = dataTime;
			}, 1000);
			console.log(this.code)
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/xzzffs.scss";
	@import "../../assets/css/mzjf/mzjfPay.scss";
</style>
